<template>
  <div class="p-2">
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table v-loading="loading" :data="accountList">
        <el-table-column label="账户名称" align="center" prop="accName" />
        <el-table-column label="类型" align="center" prop="accType" />
        <el-table-column label="账号余额" align="center" prop="balance">
          <template #default="scope">
            <span>{{ scope.row.balance/100 }} </span>
          </template>
        </el-table-column>
        <el-table-column label="冻结金额" align="center" prop="frozeAmount">
          <template #default="scope">
            <span>{{ scope.row.frozeAmount/100 }} </span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">
            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="调账" placement="top">
              <el-button link type="primary" icon="Download" @click="handleAdjustment(scope.row)" v-hasPermi="['retail:merchant:edit']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <Adjugement v-model:adjDialogVisible="adjDialog.visible" :id="accountId" :accountName="accountName" />
  </div>
</template>

<script setup name="Account" lang="ts">
import { getAccountList } from '@/api/retail/shop';
import { AccountVO } from '@/api/retail/account/types';
import {propTypes} from "@/utils/propTypes";
import Adjugement from "@/views/retail/account/adjugement.vue";

const props = defineProps({
  // 商户ID
  id: propTypes.string.def("0")
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));

const accountList = ref<AccountVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const total = ref(0);
const accountId = ref<number|string|undefined>(0);
const accountName = ref<string|undefined>("");
const adjDialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

/** 查询资金账号列表 */
const getList = async () => {
  loading.value = true;
  const res = await getAccountList(props.id);
  accountList.value = res.data;
  total.value = res.total;
  loading.value = false;
}

/** 资金账号调账 */
const handleAdjustment = async (row?:AccountVO) => {
  adjDialog.title = "调账";
  adjDialog.visible = true;
  accountId.value = row?.id;
  accountName.value = row?.accName;
}

onMounted(() => {
  getList();
});
</script>
